<template>
    <view>
        <u-form labelWidth="90px" labelPosition="left" :model="userInfo" :rules="rules" ref="authenticationForm">
            <u-form-item label="真实姓名" prop="name" borderBottom="true" ref="item1">
                <u-input v-model="userInfo.name" border="none" placeholder="请输入姓名"></u-input>
            </u-form-item>
            <u-form-item label="证件号码" prop="card_id" borderBottom="true" ref="item2">
                <u-input v-model="userInfo.card_id" border="none" placeholder="请输入身份证件号码"></u-input>
            </u-form-item>
        </u-form>
        <u-button type="primary" text="确认" @click="confirm"></u-button>
        <u-toast ref="toastRef"></u-toast>
    </view>
</template>

<script setup lang="ts">
import { ref , reactive } from 'vue';
import CONTENT from '@/utils/constants'
import { identifyCard } from '@/api/mine/mine'
import type { cardInfo } from '@/model/api/user'

const toastRef: any = ref(null)
const authenticationForm: any = ref(null)

const emit = defineEmits([ "next" ]);
const next = () => {
  emit('next');
}


const userInfo:cardInfo = reactive({
    name:'',
    card_id:''
})
const rules: any = ref({
    name: [{
        type: 'string',
        required: true,
        pattern: CONTENT.PATTERN.NAME,
        // 正则检验前先将值转为字符串
        transform(value: any) {
            return String(value);
        },
        message: '姓名格式不合法'
    }],
    card_id: [{
        type: 'string',
        required: true,
        message: '输入合法的身份证件号',
        // 正则检验前先将值转为字符串
        transform(value: any) {
            return String(value);
        },
        pattern: CONTENT.PATTERN.IDCARD_INLAND,
        trigger: ['blur', 'change']
    }]
}

)

const confirm = ()=>{
    authenticationForm.value.validate().then(() => {
        identifyCard(userInfo).then((res:any) => {
            if(res.code == 200){
                toastRef.value.show({
                    type: 'success',
                    message: "身份识别成功",
                    duration: 3000,
                    position: 'top',
                    complete: function () {
                        next()
                    }
                })
            }
        })
    })
}

</script>

<style lang="scss" scoped>
</style>